<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '健康档案',
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view class="pb-safe">
    <g-navbar title="健康档案" />
    <view class="health-record px-30rpx py-40rpx relative">
      <text class="health-record-title text-40rpx font-bold">创建健康档案</text>
      <view class="health-record-desc text-28rpx desc-text mt-2">
        完善您的健康信息，获取个性化饮食建议
      </view>
      <!-- 装饰 -->
      <view
        class="decorate rounded-full opacity-50 bg-#dcedc8 absolute w-20 h-20 right-4 top-20rpx"
      />

      <view class="base-info mt-60rpx relative">
        <view class="sub-title">
          <text>基础数据</text>
          <text class="text-#8bc34a text-26rpx ml-20rpx">必填</text>
        </view>
        <!-- 装饰 -->
        <view
          class="decorate rounded-full opacity-20 bg-#a4d5a6 absolute w-16 h-16 inset-0 -top-45rpx"
        />
        <view class="form-box">
          <view class="form-item flex justify-between items-center">
            <view>
              <view class="label desc-text ml-20rpx">当前体重（kg）</view>
              <view class="base-input pr-20rpx">
                <input class="input" :maxlength="3" placeholder="140" />
                <image class="w-55rpx h-55rpx" src="/static/icon/balance.png" />
              </view>
            </view>
            <view class="">
              <view class="label ml-20rpx desc-text">目标体重（kg）</view>
              <view class="base-input pr-20rpx">
                <input class="input" :maxlength="3" placeholder="120" />
                <image class="w-50rpx h-35rpx" src="/static/icon/target.png" />
              </view>
            </view>
          </view>
          <view class="form-item mt-20rpx flex justify-between items-center">
            <view>
              <view class="label desc-text ml-20rpx">身高（cm）</view>
              <view class="base-input pr-20rpx">
                <input class="input" :maxlength="3" placeholder="170" />
                <image class="w-55rpx h-40rpx" src="/static/icon/height.png" mode="scaleToFill" />
              </view>
            </view>
            <view class="">
              <view class="label ml-20rpx desc-text">年龄</view>
              <view class="base-input pr-20rpx">
                <input class="input" :maxlength="3" placeholder="18" />
                <image class="w-50rpx h-40rpx" src="/static/icon/birthday.png" mode="scaleToFill" />
              </view>
            </view>
          </view>
          <view class="form-item mt-20rpx">
            <view class="label desc-text ml-20rpx">性别</view>
            <view class="sex-checkbox flex items-center justify-between">
              <template v-for="sexItem in sexList" :key="sexItem.value">
                <view
                  class="base-input items-center flex justify-center"
                  @click="handleCheckSex(sexItem.value)"
                  :class="{ sexActive: sexItem.value === formData.sex }"
                >
                  <image class="w-40rpx h-40rpx mr-20rpx" :src="sexItem.img" mode="scaleToFill" />
                  <text class="text-26rpx text-text-primary">{{ sexItem.text }}</text>
                </view>
              </template>
            </view>
          </view>
        </view>
        <view class="sub-title">
          <text>活动强度</text>
          <text class="hot-text">影响热量</text>
        </view>
        <view class="form-box">
          <wd-radio-group v-model="formData.activity" cell shape="dot">
            <template v-for="activity in activityList" :key="activity.value">
              <view class="item">
                <view
                  class="icon rounded-full bg-bg-lighter w-80rpx h-80rpx flex items-center justify-center mr-20rpx"
                >
                  <image
                    :src="
                      formData.activity === activity.value ? activity.activeIcon : activity.icon
                    "
                    class="w-40rpx h-40rpx"
                  />
                </view>
                <view class="name flex-1 flex flex-col items-start">
                  <view class="text-28rpx font-bold text-text-primary">
                    {{ activity.text }}
                  </view>
                  <view class="text-text-secondary text-24rpx mt-10rpx">{{ activity.desc }}</view>
                </view>
                <wd-radio :value="activity.value" checked-color="#4caf50" />
              </view>
            </template>
          </wd-radio-group>
        </view>
        <!-- <view class="sub-title">
          <text>饮食偏好</text>
          <text class="hot-text">影响热量</text>
        </view> -->
      </view>
    </view>
    <view class="btn flex items-center justify-center">
      <button class="button" hover-class="button-hover" @click="debounceSave">保存档案</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { debounce } from '@/utils'
defineOptions({
  options: {
    styleIsolation: 'shared',
  },
})
const sexList = ref([
  { text: '男', value: 1, img: '/static/icon/man.png' },
  { text: '女', value: 2, img: '/static/icon/girl.png' },
])
const activityList = reactive([
  {
    text: '久坐',
    value: 1.2,
    desc: '几乎不运动，大部分时间坐着',
    icon: '/static/icon/sedentariness.png',
    activeIcon: '/static/icon/sedentariness_.png',
  },
  {
    text: '轻度运动',
    desc: '每周运动1-3次',
    value: 1.375,
    icon: '/static/icon/mild-exercise.png',
    activeIcon: '/static/icon/mild-exercise_.png',
  },
  {
    text: '中度运动',
    value: 1.55,
    desc: '每周运动3-5次',
    icon: '/static/icon/middle-exercise.png',
    activeIcon: '/static/icon/middle-exercise_.png',
  },
  {
    text: '高强度',
    value: 1.725,
    desc: '每周运动6-7次或体力劳动工作',
    icon: '/static/icon/tall-exercise.png',
    activeIcon: '/static/icon/tall-exercise_.png',
  },
])

const formData = ref({
  sex: 1,
  activity: 1.2,
})
const handleCheckSex = (value: number) => {
  formData.value.sex = value
}
const handleSave = () => {
  setTimeout(() => {
    uni.switchTab({
      url: '/pages/home/index',
    })
  }, 300)
}
const debounceSave = debounce(handleSave, 500)
</script>

<style>
page {
  background: var(--primaryLighter);
}
</style>
<style lang="scss" scoped>
.sub-title {
  font-size: 34rpx;
  font-weight: bold;
}
.form-box {
  z-index: 999;
  padding: 1.5rem;
  margin-top: 40rpx;
  margin-bottom: 40rpx;
  background: #fff;
  border-radius: 1rem;
  .label {
    margin-bottom: 15rpx;
  }
}
.base-input {
  display: flex;
  align-items: center;
  width: 250rpx;
  height: 80rpx;
  border: 1px solid #ccc;
  border-radius: 20rpx;

  .input {
    height: 100%;
    padding: 0 20rpx;
    font-size: 26rpx;
    line-height: 100%;
  }
}
.sexActive {
  background-color: var(--primaryLighter);
  border: 2rpx solid var(--primary);
}
.hot-text {
  box-sizing: border-box;
  padding: 10rpx 20rpx;
  margin-left: 20rpx;
  font-size: 24rpx;
  color: var(--accent);
  background: #fef2df;
  border-radius: 30rpx;
}
.item {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25rpx 15rpx;
  margin-bottom: 20rpx;
  border: 1rpx solid #e6e8ec;
  border-radius: 20rpx;
}
.button {
  width: 550rpx;
  height: 80rpx;
  font-size: 28rpx;
  line-height: 80rpx;
  color: #fff;
  background-image: linear-gradient(to right, var(--primary), var(--secondary));
  border-radius: 20rpx;
}
.button-hover {
  background: var(--primaryLight);
}
</style>
